<template>
  <div>
    <el-row :gutter="20">
      <el-upload
        class="upload-demo"
        name="file,"
        action="/api/rema/uploadPhoto"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :auto-upload="true"
        :on-success="handleAvatarSuccess"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="mini" type="primary">上传</el-button>
      </el-upload>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-button @click="editBtn = true">编辑</el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-button @click="delBtn">删除相册</el-button>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <span>状态=待审核</span>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-button>审核</el-button>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button @click="newAlbumBtn = true">新建相册</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form ref="form" :v-model="formData" :inline="true">
            <el-form-item>
              <el-select v-model="formData.residence" placeholder="请选择">
                <el-option label="住宅" value="3"></el-option>
                <el-option label="商铺" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formData.effectImg" placeholder="请选择">
                <el-option label="住宅" value="1"></el-option>
                <el-option label="商铺" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <p>注：在使用“替换”上传功能时，请保持图片的扩展名于被替换图片相同</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in albumDatafunData" :key="item.image_id">
        <div class="grid-content bg-purple">
          <div class="boxImg">
            <img
              :src="'/api' + item.image_path"
              alt=""
            />
          </div>
          <div class="titleBox">
            <p>
              <span>扩展名：{{ item.image_extension_name }}</span>
              <span>排序：{{ item.image_sort }}</span>
            </p>
            <p>原图尺寸：{{ item.image_size }}</p>
          </div>
          <!-- 鼠标移入显示 -->
          <div class="btnHover">
            <!-- <el-upload
              action="http://172.16.10.77:8080/rema/uploadPhoto"
              :on-change="uploadImg"
              :auto-upload="false"
              :data="uploadPhotoImg"
              ref="upload"
              :limit="1"
            > -->
              <!-- <el-upload
                class="upload-demo"
                name="album_id='1',file,"
                action="http://172.16.10.77:8080/rema/uploadPhoto"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :auto-upload="true"
                :on-success="handleAvatarSuccess"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="mini" type="primary">替换上传</el-button>
              </el-upload>
            </el-upload> -->
            <el-button size="small">设置排序</el-button>
            <el-button size="small">设为封面</el-button>
            <el-button size="small" @click="delImgBtn">删除图片</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editBtn">
      <el-form :model="form">
        <el-form-item label="所属楼盘" :label-width="editBtnWidth">
          <p>{{ rowData.real_estate_name }}</p>
        </el-form-item>
        <el-form-item label="业态" :label-width="editBtnWidth">
          <p>{{ rowData.property_type_name }}</p>
        </el-form-item>
        <el-form-item label="相册名称" :label-width="editBtnWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editBtn = false">取 消</el-button>
        <el-button type="primary" @click="editBtn = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新建相册 -->
    <el-dialog title="新建相册" :visible.sync="newAlbumBtn">
      <el-form :model="form">
        <el-form-item label="所属楼盘" :label-width="editBtnWidth">
          <p>{{ rowData.real_estate_name }}</p>
        </el-form-item>
        <el-form-item label="选择业态" :label-width="editBtnWidth">
          <el-select v-model="form.region" placeholder="请选择业态">
            <el-option label="住宅" value="shanghai"></el-option>
            <el-option label="商铺" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="相册名称" :label-width="editBtnWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newAlbumBtn = false">取 消</el-button>
        <el-button type="primary" @click="newAlbumBtn = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  props: ["rowData"],
  data() {
    return {
      aa:'',
      album_id: 1,
      property_type_id: this.rowData.property_type_id,
      real_estate_id: this.rowData.real_estate_id,
      fileList: [],
      formData: {
        residence: "",
        effectImg: "",
      },
      imgData: [
        {
          id: "1",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "2",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "3",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "4",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "5",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "6",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
        {
          id: "7",
          img: "../assets/logo.png",
          expand: "JPG",
          sort: "255",
          imgSize: "200*200",
        },
      ],
      editBtn: false,
      newAlbumBtn: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      editBtnWidth: "120px",
      uploadPhotoImg: {
        album_id: 1,
        file: "",
        property_type_id: "",
        real_estate_id: "",
      },
    };
  },
  methods: {
    // 删除相册
    delBtn() {
      this.$confirm("此操作将永久删除该相册, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleExceed() {
      console.log("超出上传数量");
    },
    // 上传
    // uploadFile(file) {
    //   console.log(file);
    //   let formDatas = new FormData();
    //   formDatas.append("album_id", 1);
    //   formDatas.append("file", file.file);
    //   formDatas.append("property_type_id", 1);
    //   formDatas.append("property_type_id", 1);
    //   this.$post("/rema/uploadPhoto", formDatas).then((res) => {
    //     if (res.code == 200) {
    //       this.$message({
    //         message: res.msg,
    //         type: "success",
    //       });
    //     } else {
    //       this.$message({
    //         message: res.msg ? res.msg : "操作失败",
    //         type: "error",
    //       });
    //     }
    //   });
    // },
    handleAvatarSuccess(response) {
      console.log(response);
    },
    uploadImg() {},
    handlePreview() {},
    handleRemove() {},
    // 删除照片
    delImgBtn() {
      this.axios({
        url: "/api/rema/DeletePicture",
        method: "post",
        params: {
          album_id: 1,
          image_id: this.aa,
        },
      })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    albumDatafunData() {
      return this.$store.state.FloorData.albumData;
      console.log(this.$store.state.FloorData.albumData);
    },
  },
  created() {
    console.log(this.albumDatafunData);
    if(this.albumDatafunData !== null){
      this.aa = this.albumDatafunData[0].image_id
    }
    console.log(this.aa);
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
.grid-content {
  text-align: center;
  line-height: 36px;
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.boxImg {
  height: 180px;
  //   border: 1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}
.titleBox {
  height: 80px;
  //   border: 1px solid orange;
}
.btnHover {
  // border: 1px solid orange;
  height: 80px;
}
.btnHover {
  display: none;
}
.grid-content:hover .titleBox {
  display: none;
}
.grid-content:hover .btnHover {
  display: block;
}
</style>